<script setup lang="ts">
import { ref } from 'vue';
import { Carousel } from '@/components';

// 定义 props
const props = defineProps({
    open: {
        type: Boolean,
        required: true,
        default: false
    },
    is_detail: {
        type: Boolean,
        required: true,
        default: false
    },
    menu_info: {
        type: Object,
        default: () => {
            return {
                id: '',
                name: '',
                introduction: '',
                details: '',
                price: 0,
                cover_image: ''
            };
        }
    },
    selectedTags: {
        type: Object,
        default: () => {
            return {};
        }
    }
});

// 定义 emit
const emit = defineEmits(['onClose', 'onAdd', 'onSelectTag']);

const value1 = ref('');

const onCancel = () => {
    emit('onClose');
    onClear();
};
const onClear = () => {
    value1.value = '';
    count.value = 1;
};

const selectTag = (standardName: string, tag: string) => {
    emit('onSelectTag', standardName, tag);
};

const count = ref(1);
// const increment = debounce(() => {
//   if (count.value < 100) {
//     count.value++;
//   }
// }, 1000);
const increment = () => {
    if (count.value < 100) {
        count.value++;
    }
};
const decrement = () => {
    if (count.value > 1) {
        count.value--;
    }
};

const active_index = ref(0);
const onSplide = (index: number) => {
    active_index.value = index;
};

const scrollToElement = (elementId: string) => {
    const element = document.getElementById(elementId);
    if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
};

const addToCart = () => {
    emit('onAdd', count.value);
    onCancel();
};
</script>

<template>
    <a-modal
        :open="open"
        :closable="false"
        :width="518"
        :bodyStyle="{ padding: '26px 0 0' }"
        :footerStyle="{ paddingBottom: '30px' }"
        destroyOnClose
        class="menu-modal !top-[192px]"
        @cancel="onCancel"
    >
        <div class="max-h-[710px] overflow-auto px-[22px]">
            <div class="relative h-[300px] w-full overflow-hidden rounded-2xl">
                <img
                    v-if="!menu_info?.image_list?.length"
                    class="h-full w-full rounded-2xl object-cover"
                    :src="menu_info?.cover_image"
                    alt="cate"
                />
                <Carousel v-if="!!menu_info?.image_list?.length" :slides="menu_info?.image_list" @onSplide="onSplide">
                    <template #slide="{ slide }">
                        <img :src="slide.image" :alt="slide.alt" class="h-full w-full object-cover" />
                    </template>
                </Carousel>
                <p
                    v-if="menu_info?.top_number"
                    class="absolute top-0 right-0 flex h-[30px] min-w-[65px] items-center justify-center rounded-tr-2xl rounded-bl-2xl bg-gradient-to-b from-[#ff6c74] via-[#ff6c74] via-14% to-[#e53039] px-3 text-[15px]"
                >
                    TOP{{ menu_info?.top_number }}
                </p>
                <div class="absolute right-2 bottom-2 flex rounded-full bg-[#393939BD] p-1.5 text-sm">
                    <span class="h-[26px] rounded-full bg-white px-2.5 leading-[26px] text-black">
                        画像{{ active_index + 1 }}/{{ menu_info?.image_list?.length || 1 }}
                    </span>
                    <span class="h-[26px] px-2.5 leading-[26px]" v-if="!!menu_info.standards?.length" @click="scrollToElement('standard')">
                        規格
                    </span>
                    <span class="h-[26px] px-2.5 leading-[26px]" @click="scrollToElement('detail')">詳細</span>
                </div>
            </div>
            <div class="mt-4 flex items-center">
                <p class="mr-auto text-lg font-semibold">{{ menu_info?.name }}</p>
                <p class="text-sm font-semibold">
                    ¥{{ menu_info?.price }}<span class="ml-2 text-xs font-normal text-[#BDBDBD]">(税込)</span>
                </p>
            </div>
            <p class="my-4 text-xs text-[#B9B9B9]">{{ menu_info.introduction }}</p>
            <a-textarea
                class="flex-1 !border-[#494949] !bg-transparent !text-xs"
                v-model:value="value1"
                placeholder="より多くのニーズを入力する..."
                :auto-size="{ minRows: 4, maxRows: 4 }"
            />
            <div class="mt-5 rounded-lg bg-[#8686861A] px-2.5 py-3.5" id="standard" v-if="!!menu_info.standards?.length">
                <p class="mb-3.5 border-b border-[#84848466] pb-2.5 text-base leading-5 font-medium">規格を選択</p>
                <div v-for="standard in menu_info.standards" :key="standard.name" class="standard">
                    <h4
                        class="relative mt-3 mb-1 px-2 leading-5 font-semibold text-[#B9B9B9] before:absolute before:top-2 before:left-0 before:block before:h-1 before:w-1 before:rounded-xs before:bg-[#D9D9D9] before:content-['']"
                    >
                        {{ standard.name }}
                    </h4>
                    <div class="flex gap-1 px-2">
                        <button
                            v-for="tag in standard.tags"
                            :key="tag"
                            class="h-6 rounded bg-[#656565] px-2.5"
                            :class="{ 'btn-bg-gradient': selectedTags[standard.id] === tag }"
                            @click="selectTag(standard.id, tag)"
                        >
                            {{ tag }}
                        </button>
                    </div>
                </div>
            </div>
            <div class="mt-5 rounded-lg bg-[#8686861A] px-2.5 py-3.5" id="detail">
                <p class="mb-3.5 border-b border-[#84848466] pb-2.5 text-base leading-5 font-medium">詳細</p>
                <div v-html="menu_info.details"></div>
            </div>
        </div>
        <template #footer>
            <div class="border-gradient mx-auto w-[calc(100%-44px)] rounded-2xl p-0.5">
                <div class="w-full rounded-2xl bg-[#5D5D5D] px-4 py-4 shadow-[0px_2px_8px_#0000001A] backdrop-blur-lg">
                    <div class="mb-3 flex items-center">
                        <p class="mr-auto text-sm leading-none font-semibold">
                            ¥{{ menu_info?.price }}<span class="ml-2 text-xs leading-none font-normal text-[#BDBDBD]">(税込)</span>
                        </p>
                        <i class="fantec_font ft_MinusCircle text-xl leading-none text-[#A0A0A0]" @click="decrement"></i>
                        <p class="min-w-10 px-2.5 text-center leading-5">{{ count }}</p>
                        <i class="fantec_font ft_PlusCircle text-xl leading-none text-[#E7323C]" @click="increment"></i>
                    </div>
                    <a-button class="btn-bg-gradient !h-12 !text-lg" type="primary" block @click="addToCart">カートに入れる</a-button>
                </div>
            </div>
        </template>
    </a-modal>
</template>
